<template>
  <div>
    <el-row class="tac" style="min-height:600px">
      <el-col :span="5">
        <a-tree checkable v-model="checkedKeys" :tree-data="treeData" @expand="onExpand" @check="onCheck" @select="onSelect" :autoExpandParent="true" />
      </el-col>
      <el-col :span="19">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <img src="https://zht-admin-test.huiqulx.com/subapp/business_analysis-admin/2b2d5d900b3f14df583cfbf5b4f48b7d.png" alt="push" style="width: 20px; height: 20px; margin-top: -8px;" />
            <span style="font-size: 18px; padding-left: 10px; font-weight: bold;">按钮权限</span>
            <span style="float: right;">
              <a v-if="checkednode.typeid === 4" class="margin-a" href="javascript:;" style="margin-right: 5px;" @click="addMenuButton()">添加</a></span>
          </div>

          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="按钮编码" prop="actionCode">
            </el-table-column>
            <el-table-column label="按钮名称" prop="actionName">
            </el-table-column>
            <el-table-column align="right" label="操作">
              <template slot-scope="scope">
                <a class="margin-a" href="javascript:;" style="margin-right: 5px;" @click="delMenuButton(scope.row)">删除</a>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <div class="footer">
      <a-button type="primary" @click="confirm()" style="margin-right: 10px;">确定</a-button>
      <a-button @click="close()">关闭</a-button>
    </div>
    <zhlDialog title="菜单按钮" ref="roleMenuActiondialog" width="300px" class="my-dialog">
      <div class="menuButton">
        <a-tag v-for="item in menuActionDatalist" v-bind:key="item.actionCode" :color="selectedActionList.indexOf(item.fid) < 0 ? 'blue' : '#108ee9'" @click="clickActionItem(item.fid)">
          {{ item.actionName }}
        </a-tag>
      </div>
      <div class="footer">
        <a-button type="primary" @click="submitActionRole()" style="margin-right: 10px;">确定</a-button>
        <a-button @click="$refs.roleMenuActiondialog.visible = false">关闭</a-button>
      </div>
    </zhlDialog>
  </div>
</template>
<script>
import { LoadRoleMenuPower, SavePower } from '@/api/tappRole'
import {
  queryByRoleMenuId,
  delActionRole,
  getActionByMenuId,
  saveActionRole
} from '@/api/menuAction'

export default {
  props: ['roleID'],
  data () {
    return {
      treeData: [],
      checkedKeys: [],
      parentcheckedKeys: [],
      checkednode: {},
      tableData: [],
      menuActionDatalist: [],
      selectedActionList: []
    }
  },
  watch: {
    checkedKeys (val) {
      console.log('onCheck', val)
    }
  },
  methods: {
    onExpand (expandedKeys) {
      console.log('onExpand', expandedKeys)
    },
    onCheck (checkedKeys, info) {
      console.log(checkedKeys)
      console.log(info)
      this.checkedKeys = checkedKeys
      if (info.halfCheckedKeys !== undefined) {
        for (let i = 0; i < info.halfCheckedKeys.length; i++) {
          if (this.parentcheckedKeys.indexOf(info.halfCheckedKeys[i]) < 0) {
            this.parentcheckedKeys.push(info.halfCheckedKeys[i])
          }
        }
      }
    },
    addMenuButton () {
      getActionByMenuId(this.checkednode.fid).then(res => {
        this.menuActionDatalist = res.data
      })
      this.$refs.roleMenuActiondialog.visible = true
    },
    clickActionItem (actionId) {
      if (this.selectedActionList.indexOf(actionId) < 0) {
        this.selectedActionList.push(actionId)
      } else {
        this.selectedActionList.splice(
          this.selectedActionList.indexOf(actionId),
          1
        )
      }
    },
    delMenuButton (rowdata) {
      const param = {
        id: rowdata.fid
      }
      delActionRole(param).then(res => {
        console.log(res)
        this.$message.success('删除成功！')
        this.loadRoleMenuButton()
      })
    },
    onSelect (selectedKeys, info) {
      if (info.node.dataRef.code !== this.checkednode.code) {
        this.checkednode = info.node.dataRef
        this.loadRoleMenuButton()
      } else {
        this.tableData = []
      }
    },
    submitActionRole () {
      const param = {
        roleId: this.roleID,
        actionList: this.selectedActionList
      }
      saveActionRole(param).then(res => {
        console.log(res)
        this.loadRoleMenuButton()
        this.$message.success('操作成功!')
      })
    },
    loadRoleMenuButton () {
      if (this.checkednode.typeid === 4) {
        queryByRoleMenuId(this.roleID, this.checkednode.fid).then(res => {
          this.tableData = res.data
          for (let i = 0; i < res.data.length; i++) {
            const item = res.data[i]
            if (this.selectedActionList.indexOf(item.actionId) < 0) {
              this.selectedActionList.push(item.actionId)
            }
          }
        })
      }
    },
    LoadData () {
      LoadRoleMenuPower(this.roleID).then(res => {
        this.checkedKeys = res.data.powermenu
        this.treeData = res.data.menulist
      })
    },
    confirm () {
      const checkedKeylist = this.checkedKeys
      for (let i = 0; i < this.parentcheckedKeys.length; i++) {
        checkedKeylist.push(this.parentcheckedKeys[i])
      }
      const param = {
        PowerParam: JSON.stringify(this.checkedKeys),
        RoleFID: this.roleID
      }
      SavePower(param).then(res => {
        this.$message.success('保存成功！')
        this.$emit('confirm', res)
      })
    },
    close () {
      this.$emit('close')
    }
  },
  mounted () {
    this.LoadData()
  }
}
</script>
<style lang="less">
.footer {
  margin-bottom: 10px;
  height: 50px;
  margin-top: -50px;
  float: right;
}
.menuButton {
  height: 200px;
}
.menuButton span {
  margin: 5px;
}
</style>
